<template>
    <t-dialog :visible="dialogVisible" size="small" @dialog-close="cancel">
      <div slot="title" class="app-service-center-content-charter-create-dialog__title">{{ dialogTitle }}</div>
      <div slot="content" class="app-service-center-content-charter-create-dialog__content">
        <div class="app-service-center-content-charter-create-dialog__content">
          <div class="app-service-center-content-charter-create-dialog__content__name">
            <div class="app-service-center-content-charter-create-dialog__content__name__title">用户编号</div>
            <div class="app-service-center-content-charter-create-dialog__content__name__value">  
              <el-input v-model="cusId" size="large" placeholder="请输入内容"></el-input>    
            </div>
          </div>
          <div class="app-service-center-content-charter-create-dialog__content__synopsis">
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__title">用户姓名</div>
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__value">
              <el-input v-model="name" size="large" placeholder="请输入内容"></el-input>                  
            </div>
          </div>
          <div class="app-service-center-content-charter-create-dialog__content__synopsis">
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__title">用户性别</div>
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__value">
              <el-select v-model="sex" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>               
            </div>
          </div>
          <div class="app-service-center-content-charter-create-dialog__content__name">
            <div class="app-service-center-content-charter-create-dialog__content__name__title">用户年龄</div>
            <div class="app-service-center-content-charter-create-dialog__content__name__value">  
              <el-input v-model="age" size="large" placeholder="请输入内容"></el-input>        
            </div>
          </div>
          <div class="app-service-center-content-charter-create-dialog__content__synopsis">
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__title">用户身份证</div>
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__value">
              <el-input v-model="idCardNumber" size="large" placeholder="请输入内容"></el-input>         
            </div>
          </div>
          <div class="app-service-center-content-charter-create-dialog__content__synopsis">
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__title">期望贷款额</div>
            <div class="app-service-center-content-charter-create-dialog__content__synopsis__value">
              <el-input v-model="expectedLoan" size="large" placeholder="请输入内容"></el-input>         
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: right;">
        <t-button size="normal" type="insert" @click="createItem">增加</t-button>
        <t-button size="normal" type="primary" @click="cancel">退出</t-button>
      </div>
    </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-charter-create-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
      TDialog,
    },
    data() {
      return {
        input: '',
        cusId: '',
        name: '',
        sex: '',
        age: '',
        expectedLoan: '',
        idCardNumber: '',
        propertyAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        depositAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        financialAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        options: [{
          value: '男',
          label: '男',
        }, {
          value: '女',
          label: '女',
        }],
        value: '',
      };
    },
    computed: {
      currentInputProperty() {
        return this.store.current.input.property;
      },
      currentInputDeposit() {
        return this.store.current.input.deposit;
      },
      currentInputFinancial() {
        return this.store.current.input.financial;
      },
      dialogTitle() {
        return this.store.createDialog.title;
      },
      dialogVisible() {
        return this.store.createDialog.visible;
      },
    },
    methods: {
      handleCurrentInputProperty(val) {
        this.store.current.input.property = val;
      },
      handleCurrentInputDeposit(val) {
        this.store.current.input.deposit = val;
      },
      handleCurrentInputFinancial(val) {
        this.store.current.input.financial = val;
      },
      cancel() {
        this.$emit('close');
      },
//    deleteItem() {
//      const id = this.store.current.item.id;
//      this.store.charters = this.store.charters.filter((item) => {
//        return item.id !== id;
//      });
//      const token = this.$stateHub.csrf;
//      const target = `api/charters/${id}/actions/delete`;
//      this.$http.request({
//        url: target,
//        method: 'post',
//        data: {
//          token,
//        },
//        transformRequest: [(data) => {
//          const encodeToken = encodeURIComponent(data.token);
//          return `_csrf=${encodeToken}`;
//        }],
//      }).then((response) => {
//        this.$stateHub.csrf = response.data.csrf;
//        this.$emit('close');
//      }).catch((error) => {
//        this.$stateHub.csrf = error.response.data.csrf;
//      });
//    },
//    updateItem() {
//      const id = this.store.current.item.id;
//      const name = this.store.current.input.name;
//      const synopsis = this.store.current.input.synopsis;
//      Object.values(this.store.charters).forEach((item) => {
//        if (item.id === id) {
//          item.name = name;
//          item.synopsis = synopsis;
//        }
//      });
//      const token = this.$stateHub.csrf;
//      const target = `api/charters/${id}`;
//      this.$http.request({
//        url: target,
//        method: 'put',
//        data: {
//          token,
//          name,
//          synopsis,
//        },
//        transformRequest: [(data) => {
//          const encodeToken = encodeURIComponent(data.token);
//          const encodeName = encodeURIComponent(data.name);
//          const encodeSynopsis = encodeURIComponent(data.synopsis);
//          return `_csrf=${encodeToken}&name=${encodeName}&synopsis=${encodeSynopsis}`;
//        }],
//      }).then((response) => {
//        this.$stateHub.csrf = response.data.csrf;
//        this.$emit('close');
//      }).catch((error) => {
//        this.$stateHub.csrf = error.response.data.csrf;
//      });
//    },
      createItem() {
        const cusId = this.cusId;
        const name = this.name;
        const sex = this.sex;
        const age = this.age;
        const idCardNumber = this.idCardNumber;
        const expectedLoan = this.expectedLoan;
        const target = 'api/user-infos/page/self';
        this.$http.request({
          url: target,
          method: 'post',
          data: {
            cusId,
            name,
            sex,
            age,
            idCardNumber,
            expectedLoan,
          },
          transformRequest: [(data) => {
            const encodeCusId = encodeURIComponent(data.cusId);
            const encodeName = encodeURIComponent(data.name);
            const encodeSex = encodeURIComponent(data.sex);
            const encodeAge = encodeURIComponent(data.age);
            const encodeIdCardNumber = encodeURIComponent(data.idCardNumber);
            const encodeExpectedLoan = encodeURIComponent(data.expectedLoan);
            return `cusId=${encodeCusId}&name=${encodeName}&sex=${encodeSex}&age=${encodeAge}&idCardNumber=${encodeIdCardNumber}&expectedLoan=${encodeExpectedLoan}`;
          }],
        }).then((response) => {
          this.store.charters = [];
          Object.values(response.data).forEach((item) => {
            this.store.charters.push({
              cusId: item.cusId,
              name: item.name,
              sex: item.sex,
              age: item.age,
              state: item.state,
              idCardNumber: item.idCardNumber,
              property: item.property,
              deposit: item.deposit,
              financial: item.financial,
              id: item.id,
            });
          });
          this.$emit('close');
        }).catch((error) => {
          this.$stateHub.csrf = error.response.data.csrf;
        });
      },
    },
  };
</script>